<template>
  <div>
    <p>eat: {{ obj.hobby.eat }}</p>
    <button @click="obj.hobby.eat = '🍜'">修改 eat</button>
    <button @click="obj = { hobby: { eat: '🍜' } }">修改 eat</button>
  </div>
</template>

<script>
import { ref, watch, isReactive } from 'vue';

export default {
  setup() {
    const obj = ref({
      hobby: {
        eat: '西瓜',
      },
    })
    /* reactive({
      value: {
        hobby: {
          eat: '西瓜',
        },
      }
    }) */
    // 如果 ref 内部的数据是一个对象的话（其实这个对象也是 reactive 类型的数据），其实它内部还是借助 reactive 实现的

    console.log(isReactive(obj.value)) // true

    // 监听的是一个 reactive 类型的数据了，【那么就符合监听 reactive 数据的三个特点】
    watch(obj.value, () => {
      console.log('触发监听')
    })

    return { obj }
  }
}
</script>

<style lang="scss" scoped></style>